<template>
	<view class="content" :style="{background:'#F7F7F7;'}">
		<view class="top-tab-list" :style="{background:'#FFFFFF;'}">
			<block v-for="(item, index) in top_tab_list" :key="index">
				<view class="item" @click="changeTabId(item.id)">
					<text class="font30" :class="tab_list_id == item.id?'fontw':''" :style="{color:tab_list_id==item.id?'#E9564F;':'#111111;'}">{{item.name}}</text>
					<view class="tab-bottom-line" v-if="tab_list_id == item.id"></view>
				</view>
			</block>
		</view>
		<block v-for="(item, index) in my_luttery_list" :key="index">
			<view class="top-tab-btn border-radius20" :style="{background:'#FFFFFF;'}">
				<view class="luttery-info-open">
					<image class="luttery-image" :src="item.cover" mode=""></image>
					<view class="luttery-gift-info">
						<block v-for="(itemG, indexG) in item.goods" :key="indexG">
							<text class="gift-no" :style="{color:'#111111;'}">{{itemG.sort}}等奖：{{itemG.name}}*{{itemG.num}}份</text>
						</block>
						<text class="time-auto" :style="{color:'#AEAEAE;'}">{{item.open_time}}自动开奖</text>
					</view>
				</view>
			</view>
			<block v-for="(itemG, indexG) in item.goods" :key="indexG">
				<view class="other" :style="{background:'#FFFFFF;'}">
					<text class="font30" :style="{color:'#111111;'}">奖品：{{itemG.name}}*{{itemG.num}}份</text>
					<view class="other-right" @click="goToLutteryCreate(item.id)">
						<text class="" :style="{color:index == 0?'#E9564F;':'#AEAEAE;'}" v-if="index == 0" ></text>
						<text class="" :style="{color:index == 0?'#E9564F;':'#AEAEAE;'}" v-if="index != 0" ></text>
						<!-- @click="goToLutteryCreate" -->
						<image class="" v-if="index != 0" src="../../../static/neck-bload.png" mode=""></image>
						<image class="" v-if="index == 0" src="../../../static/red_next.png" mode=""></image>
					</view>
				</view>
			</block>
		</block>
	</view>
</template>

<script>
	var util = require('@/js/util.js')
	export default {
		data() {
			return {
				tab_list_id:0,
				top_tab_list:[
					{
						id:0,
						name:'未开始'
					},
					{
						id:1,
						name:'进行中'
					},
					{
						id:2,
						name:'已结束'
					}
				],
				my_luttery_list:[]
			};
		},
		onShow() {
			this.getList()
		},
		methods:{
			getList(){
				let _self = this
				uni.request({
					url: util.getUrl("prizedraw/list"),
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation':uni.getStorageSync("token")
					},
					data:{
						member_id:uni.getStorageSync("member_id"),
						status:_self.tab_list_id
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							_self.my_luttery_list = res.data.data
							if(_self.my_luttery_list.length<=0){
								uni.showToast({
									title:'暂无更多信息！',
									icon:'none'
								})
							}
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							})
						}
					},
				});
			},
			goToLutteryNoPrice(id){
				uni.navigateTo({
					url:'mylutteryInfo?id='+id
				})
			},
			goToLutteryCreate(id){
				uni.navigateTo({
					url:'createLutteryInfo?id='+id
				})
			},
			changeCenterTab(id){
				this.center_tab_id = id
			},
			changeTabId(id){
				this.tab_list_id = id
				this.getList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.other{
		width: 690upx;
		border-radius: 20upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 32upx 35upx;
		margin-bottom: 30upx;
		.other-right{
			display: flex;
			align-items: center;
			image{
				width: 20upx;
				height: 31upx;
				margin-left: 20upx;
			}
		}
	}
	.luttery-info-open{
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 100%;
		.luttery-gift-info{
			width: 100%;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			padding: 30upx 0 30upx 34upx;
			.time-auto{
				margin-top: 29upx;
				font-size: 28upx;
				line-height: 38upx;
			}
			.gift-no{
				display: flex;
				flex-direction: column;
				line-height: 40upx;
				font-size: 30upx;
			}
		}
		.luttery-image{
			width: 100%;
			height: 300upx;
			border-radius: 20upx 20upx 0 0;
		}
	}
	.item{
		width: 330upx;
		height: 80upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8upx;
	}
	.top-tab-btn{
		width: 690upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30upx;
	}
	.border-radius20{
		border-radius: 20upx;
	}
	.center-view-css{
		width: 750upx;
		padding: 30upx;
		display: flex;
		align-items: center;
		flex-direction: column;
		box-sizing: border-box;
	}
	.top-tab-list{
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 690upx;
		height: 80upx;
		box-sizing: border-box;
		padding-bottom: 30upx;
		padding-top: 25upx;
		border-radius: 20upx;
		margin-bottom: 30upx;
		.item{
			display: flex;
			align-items: center;
			flex-direction: column;
			position: relative;
			.tab-bottom-line{
				position: absolute;
				bottom: 0upx;
				background: #E9564F;
				height: 4upx;
				width: 74upx;
			}
		}
	}
	.content{
		width: 750upx;
		display: flex;
		align-items: center;
		flex-direction: column;
		min-height: 100vh;
		padding-top: 30upx;
		box-sizing: border-box;
	}
</style>
